<div class="layui-card">

    <div class="layui-card-body">
        <div class="layui-form toolbar">
            搜索：<input id="menus-edit-search" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp;
            <button id="menus-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
        </div>

        <!-- 数据表格 -->
        <table class="layui-table" id="platform-table" lay-filter="menus-table"></table>
    </div>
</div>

<!--状态操作-->
<script type="text/html" id="switchTpl">
    <!-- 这里的checked的状态只是演示 -->
    <input type = "checkbox" name = "enable" value="{{d.userid}}" lay-skin = "switch" lay-text = "启用|停用" lay-filter = "off" {{d.enable=='2'?'checked':''}}>
</script>
<script>

    layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects', 'treetable','layer'],function () {
        var table = layui.table;
        var layer = layui.layer;
        var admin = layui.admin;
        var treetable = layui.treetable;
        var config = layui.config;
        var form=layui.form;

        // 渲染表格

        table.render({
            elem: '#platform-table',
            url: config.base_server + 'api-administrators/user/findAll',
            where: {
                access_token: config.getToken().access_token,
            },
            page: true,
            parseData: function (res) {
                console.log(res)
                return{
                    "code":0,
                    "msg":"",
                    "total":res.data.total,
                    "data":res.data.list,
                    "count":res.data.total,
                };
            },
            cols: [[
                {field: 'userid', minWidth: 200, title: 'ID'},
                {field: 'userna', minWidth: 200, title: '用户名字'},
                {field: 'phones', title: '联系方式'},
                {field: 'enable', width: 95, templet: '#switchTpl', title: '用户状态'}
            ]]
        });
        //监听状态操作
        form.on('switch(off)', function (obj) {
            if(obj.othis[0].innerText=='启用'){
                $.ajax({
                    url:  config.base_server + 'api-administrators/user/updateEnable',//地址：访问后台的地址
                    data: {userid: obj.value,enable: 1, access_token: config.getToken().access_token,},//前端传递给后台的数据
                    type: 'get',
                    dataType: 'json',//是后端传递到前端的数据格式
                    success: function (data) {//后端给前端的一个反馈
                        layer.msg('停用成功！')
                    }
                });
            }else {
                $.ajax({
                    url:  config.base_server + 'api-administrators/user/updateEnable',//地址：访问后台的地址
                    data: {userid: obj.value,enable: 2, access_token: config.getToken().access_token,},//前端传递给后台的数据
                    type: 'get',
                    dataType: 'json',//是后端传递到前端的数据格式
                    success: function (data) {//后端给前端的一个反馈
                        layer.msg('启用成功！')
                    }
                });
            }

        });

        // 搜索按钮点击事件
        $('#menus-btn-search').click(function () {
            var keyword = $('#menus-edit-search').val();
            table.reload('platform-table', {where: {userna: keyword}});
        });
    });
</script>